<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table宽度自动</title>
    <style>
        table{
            border-spacing: 1px;
            width: 300px;
            background-color:  #a0b3d6;
        }

        td{
            padding: 2px;
            border: 3px solid #fff;
            background-color: #fff;
        }
    </style>
</head>
<body>
    文字自动换行
    <ul>
        <li>第一列是汉字加数字，每个字都会换行</li>
        <li>第二、三列有英文单字，只有在分号时候才换行，所有宽度被文字撑的很大</li>
        <li>注意表格的边框效果</li>
    </ul>
    <table >
        <tr>
            <td>就1列就1列就1列就1列就1列</td>
            <td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
            <td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
        </tr>
    </table>
</body>
</html>